Курс Веб Дизайн в Figma - Продвинутый уровень. Создание Ui Kit

5Premium-PLUS

Уникальная практика работы в Figma и знания по проектированию UI Kit и библиотек компонентов. По окончании курса у вас будет свой собственный Ui Kit (готовый дизайн продукт), который вы научитесь расширять, дополнять и использовать для своей повседневной работы.
А также при желании - сможете продавать свои дизайн-продукты другим дизайнерам, получая пассивный доход!

Начать обучение Регистрация

О курсе - Чему Вы научитесь?

Что же такое UI kit?
UI kit (от англ. User Interface - Пользовательский Интерфейс, kit - набор, комплект) - это готовый набор элементов пользовательского интерфейса: кнопки, формы, иконки, навигация, цвета, шрифты и др. И это не просто набор готовых элементов, а набор, который легко изменять и расширять.

UI kit создаётся для того, чтобы стандартизировать дизайн (особенно актуально для сложных интерфейсов), ускорить и упростить последующую разработку дизайна, а также сохранить единую стилистику элементов и логику взаимодействия между ними и много ещё для чего.

UI kit значительно уменьшает время работы, т.к. новые элементы дизайна не нужно рисовать с нуля и есть уже готовые компоненты, на которые можно опереться.

Проходя уроки курса вы постепенно, шаг за шагом будете создавать свой продукт. От созданий базовых стилей текста и цвета, подбора правильного контраста и до готового ui kit, в котором все элементы расширяемы и связаны между собой.
Да! Вы создадите свой собственный профессиональный UI Kit в Фигма. Это правда и это намного проще, чем может показаться.

Это не просто курс по дизайну - это курс по созданию современного дизайн-продукта. Далеко не каждый практикующий дизайнер может похвастаться умением создавать такие сложные системы, как ui kit и профессиональной работой с компонентами.
Вы на практике получаете знания и сразу же их применяете.

Чему вы научитесь

  • Углубленное изучение Figma
  • Продвинутая практика работы в Figma
  • Углубленная работа со сложными компонентами
  • Правильный нейминг элементов
  • Работа с вариантами
  • Продумывание архитектуры проекта
  • Создание реального продукта Ui Kit
  • Работа с плагинами
  • Работа с hot key

В курсе есть максимально эффективные домашние задания
Студент не просто смотрит на то, что делает преподаватель, а включается в процесс, ведь некоторые элементы нужно создавать самостоятельно. Автор дает чёткие инструкции по домашним заданиям, которые нужно выполнять.

Студент их выполняет и после этого получает решение/видео-разбор по ДЗ от автора. Это самый эффективный способ обучения в онлайн формате на сегодняшний день. Студент постоянно находится в тонусе и практикуется.

Весь процесс обучения происходит в Figma
  • Вы будете пользоваться полезными плагинами и сочетаниями горячих клавиш. Узнаете крутой метод быстрого переименования слоев и объектов при помощи регулярных выражений. Эти подходы в 100 раз ускоряет рутинную работу!
  • По ходу курса вы в совершенстве изучите такие сложные темы как: компоненты, варианты, auto layout, стили и научитесь грамотно применять свои знания.
  • Гид по стилям. Создадите основу нашего кита: стили цвета, шрифты, эффекты, сетки, иконки и многое другое.
  • Библиотека компонентов. В этом модуле вы создадите все основные элементы для нашего ui kit в Figma. Вы не просто «нарисуете» их, а тщательно продумаем каждое состояние и возможности этих элементов. Вообще, вы будете много анализировать, структурировать и думать наперед. Это больше походит на работу проектировщика и архитектора. Вы создадите такие элементы, которые легко изменять, расширять, дополнять новыми свойствами. И это очень важно!
После прохождения курса студент будет работать в программе как настоящий гуру Figma!

Что вы получите, пройдя этот курс?
  • Уникальную практику работы в Figma
  • Уникальные знания по проектированию UI kit и библиотек компонентов
  • Готовый дизайн продукт (UI Kit)
  • Умение создавать и работать со сложными компонентами и вариантами
  • Возможность получать пассивный доход, продавая свои собственные дизайн-продукты

Для кого этот курс
  • Для начинающих веб дизайнеров
  • Для тех, кто хочет создавать собственные дизайн-продукты Ui Kit и получать на этом пассивный доход
  • Для тех, кто хочет получить актуальные навыки в профессии web-дизайнера, создать портфолио и стать более востребованным на рынке IT-профессий

Требования для прохождения курса
  • Хорошее владение графическим редактором Figma
Рекомендуем пройти наш базовый курс Фигма для начинающих:
Figma для Веб дизайнера - с нуля до профессионала
ВСЕ КУРСЫ - Дизайн / Веб-дизайн

Начать обучение

План курса

Программа обучения включает видео уроки по web-дизайну в Figma для начинающих и продвинутый уровень. Благодаря практическим урокам и заданиям, Вы сможете закрепить полученные знания и сформировать личное портфолио работ.

развернуть все

свернуть все

Введение - О курсе Веб дизайн в Figma - Продвинутый уровень. Создание Ui Kit
1. Создаём стили для UI Kit
  • 1.1 О чём этот модуль02:00
  • 1.2 Стили для текстов11:24
  • 1.3 Почему именно такие значения для стилей текста?02:00
  • 1.4 Стиль нейтрального цвета11:56
  • 1.5 Логика подбора стилей для главного цвета (Main Color)11:23
  • 1.6 Стили главного цвета04:48
  • 1.7 Доработка цвета. Работа с цветовой моделью HSV04:38
  • 1.8 Практика 01. Работа с плагинами02:41
  • 1.9 Проверяем контраст Главного цвета07:26
  • 1.10 Функциональные цвета08:26
  • 1.11 Ускоряем работу с помощью регулярных выражений05:26
  • 1.12 Создание Layout04:55
  • 1.13 Стили Эффектов03:57
  • 1.14 Добавление пака иконок в Ui Kit06:32
  • 1.15 Практика 02. Грамотная работа с иконками для Ui Kit07:13
2. Основные элементы UI Kit
  • 2.1 О чём этот модуль02:00
  • 2.2 Создание тегов (чипсы, бейджи)11:48
  • 2.3 Создаём Аккордеоны07:36
  • 2.4 Подробнее по Аккордеонам02:58
  • 2.5 Создание основного стека кнопок12:49
  • 2.6 Создание дополнительных состояний и стилей кнопок12:43
  • 2.7 Создаём CheckBox16:22
  • 2.8 Практика 03. Создание радио кнопок01:58
  • 2.9 Создаём модальные окна12:42
  • 2.10 Создание окон уведомления (Notification)03:37
  • 2.11 Практика 04. Создание переключателей (Switch)08:34
  • 2.12 Практика 05. Создание поля ввода текста Textarea08:50
  • 2.13 Разбираем домашнее задание по полям ввода текста. О Слоях07:20
  • 2.14 Добавление функционала к полям ввода09:12
  • 2.15 Создание Dropdown Menu12:39
  • 2.16 Дополнение блока Dropdown06:43
  • 2.17 Блок Select08:43
  • 2.18 Дополняем блок Select04:21
  • 2.19 Практика 06. Создание блока "Рейтинг"05:00
  • 2.20 Создаем Табы09:23
  • 2.21 Создаём блок Вертикальное Меню16:05
  • 2.22 Создание блока Горизонтальное меню05:26
  • 2.23 Практика 07. Создание второстепенных menu item05:00
  • 2.24 Решение задачи по созданию второстепенных пунктов меню07:26
  • 2.25 Создание инпутов18:50
  • 2.26 Создание ячеек для таблиц. Часть 109:32
  • 2.27 Создание ячеек для таблиц. Часть 211:42
3. Выкладываем наш UI Kit в community Figma
  • 3.1 Практика 08. Документация11:20
  • 3.2 Превью для Ui Kit02:32
  • 3.3 Регистрация в community в качестве автора02:11
  • 3.4 Публикация своего продукта03:49
Завершение курса - Получение Сертификата

Начать обучение

Студенты также изучают

online_course
new
online_course
new
5
  • 56 видео
  • 9 часов
online_course
new
5
  • 85 видео
  • 18 часов
online_course
new
4.8
  • 74 видео
  • 7 часов
online_course
new
5
  • 97 видео
  • 34 часа

Отзывы студентов о курсе

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса Веб Дизайн в Figma — продвинутый уровень. Создание Ui Kit.

Serebrina Obreja

все отлично прошло! спасибо

Владимир Бугаев

Все доступно и понятно, спасибо автору.

Начать обучение

Преподаватель

Course Author
Евгений Марфель

О преподавателе курса

  • Практикующий веб-дизайнер и разработчик сайтов

"Я уже обучил многих студентов и хочу поделиться своими знаниями по софту для дизайнера и профессии веб-дизайнер с тобой.

Помни, что мы должны решать проблемы пользователей и быть им полезными в первую очередь. И только после этого мы должны делать “красоту”.

Знаю Фигму и умею ею пользоваться на 100%. Рассказываю о том, как не только пользоваться компонентами, а еще и работать с ними в комплексе с плагинами, привязками, стилями - от этого работа становится намного приятнее и быстрее.

В любой, даже самой простой работе, я работаю именно так и это сильно экономит время. В курсах именно этому и обучаю."

Всего заданий: 48

Видеоуроки: 42


Продолжительность: ~6 часов